import { CompressOutlined, ExpandOutlined } from '@ant-design/icons'
import { Tooltip } from 'antd'
import { useEffect, useState } from 'react'

const FullScreen: React.FC = () => {
  const [isFullScreen, setIsFullScreen] = useState(false)

  // 检查当前是否处于全屏状态
  const checkFullScreen = () => {
    return !!(
      document.fullscreenElement ||
      (document as any).webkitFullscreenElement ||
      (document as any).mozFullScreenElement ||
      (document as any).msFullscreenElement
    )
  }

  // 进入全屏
  const enterFullScreen = () => {
    const docElm = document.documentElement
    if (docElm.requestFullscreen) {
      docElm.requestFullscreen()
    } else if ((docElm as any).webkitRequestFullscreen) {
      ;(docElm as any).webkitRequestFullscreen()
    } else if ((docElm as any).mozRequestFullScreen) {
      ;(docElm as any).mozRequestFullScreen()
    } else if ((docElm as any).msRequestFullscreen) {
      ;(docElm as any).msRequestFullscreen()
    }
  }

  // 退出全屏
  const exitFullScreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if ((document as any).webkitExitFullscreen) {
      ;(document as any).webkitExitFullscreen()
    } else if ((document as any).mozCancelFullScreen) {
      ;(document as any).mozCancelFullScreen()
    } else if ((document as any).msExitFullscreen) {
      ;(document as any).msExitFullscreen()
    }
  }

  // 切换全屏状态
  function switchFullScreen() {
    if (checkFullScreen()) {
      exitFullScreen()
    } else {
      enterFullScreen()
    }
  }

  // 监听全屏状态变化
  useEffect(() => {
    const handleFullScreenChange = () => {
      setIsFullScreen(checkFullScreen())
    }

    // 监听各种浏览器的全屏变化事件
    document.addEventListener('fullscreenchange', handleFullScreenChange)
    document.addEventListener('webkitfullscreenchange', handleFullScreenChange)
    document.addEventListener('mozfullscreenchange', handleFullScreenChange)
    document.addEventListener('MSFullscreenChange', handleFullScreenChange)

    // 监听 ESC 键退出全屏
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape' && isFullScreen) {
        exitFullScreen()
      }
    }

    window.addEventListener('keydown', handleKeyDown)

    return () => {
      // 清理事件监听
      document.removeEventListener('fullscreenchange', handleFullScreenChange)
      document.removeEventListener(
        'webkitfullscreenchange',
        handleFullScreenChange
      )
      document.removeEventListener(
        'mozfullscreenchange',
        handleFullScreenChange
      )
      document.removeEventListener('MSFullscreenChange', handleFullScreenChange)
      window.removeEventListener('keydown', handleKeyDown)
    }
  }, [isFullScreen])
  return (
    <Tooltip
      title={isFullScreen ? '退出全屏 (ESC)' : '全屏'}
      className="cursor-pointer"
    >
      <div onClick={switchFullScreen}>
        {isFullScreen ? (
          <CompressOutlined className="text-[18px] font-bold dark:text-[#08c] transition-transform duration-300 ease-in-out hover:scale-75" />
        ) : (
          <ExpandOutlined className="text-[18px] font-bold dark:text-[#08c] transition-transform duration-300 ease-in-out hover:scale-125" />
        )}
      </div>
    </Tooltip>
  )
}
export default FullScreen
